<template>
	<view class="membership-card">
		<view class="block" v-for="item in list" @click="recharge(item)">
			<view class="top">
				<text>{{item.memberCardType}}</text>
				<text class="num">{{item.cardNumber}}</text>
			</view>
			<view class="center">
				<view class="line_1">
					<text class="balance">余额￥{{item.rechargeAmount}}</text>
					<text class="gift">(充值￥{{item.rechargeInfactAmount}}元，赠送￥{{item.rechargeGiveAmount}})</text>
				</view>
				<view class="line_2">
					<text>可用次数{{item.usableNums}}/积分{{item.integral}}/优惠券{{item.couponNums}}</text>
				</view>
			</view>
			<view class="bottom">
				<text>开卡：{{item.activateStore}} {{item.createTime}}</text>
				<text class="validity">有效期 {{item.validityTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				pageNum: 1,
				pageSize: 20,
			};
		},
		onLoad () {
			if(this.list.length == 0){
				let customerId = uni.getStorageSync('customerId')
				let bossld = uni.getStorageSync('bossId')
				this.$get(this.$api.memberCardList, {
						customerId,
						bossld,
						pageNum:this.pageNum,
						pageSize:this.pageSize
					},
					(res) => {
						res.data.map(item=>{
							item.createTime = item.createTime.slice(0,11)
						})
						this.list = res.data
					}, (res) => {
						uni.showToast({
							title: res.msg ? res.msg : '网络错误',
							icon: 'none'
						});
				}, 1, 0)
			}
		},
		methods:{
			recharge(item){
				uni.navigateTo({
					url:'/pagesA/my/recharge',
					success: function(res) {
						res.eventChannel.emit('data', { data: item })
					}
				})
			}
		},
		onNavigationBarButtonTap(e) {
			
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F5F6F7;
	}
	.membership-card {
		.block {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 18rpx 28rpx;
			padding: 38rpx 30rpx;
			width: 694rpx;
			height: 279rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			box-sizing: border-box;
			.top {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				.num {
					margin-left: 18rpx;
				}
			}
			.center {
				.line_1 {
					.balance {
						font-size: 30rpx;
						color: #4C88FF;
					}
					.gift {
						font-size: 24rpx;
						color: #A1A7B2;
					}
				}
				.line_2 {
					font-size: 26rpx;
					color: #07C160;
				}
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}

</style>
